<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <!-- 标签页 -->
      <view class="tab-scroll">
        <view class="tab-container">
          <view v-for="(tab, index) in tabs"
                :key="index"
                :class="{'active': currentTab === index}"
                class="tab-item"
                @click="currentTab = index">
            {{ tab }}
          </view>
        </view>
      </view>
    </view>
    <!-- 内容区域 -->
    <view class="content">
      <!-- 待办事项循环渲染 -->
      <view v-for="(item, index) in todoList" :key="index"
            class="todo-item">
        <view class="item-header">
          <text class="item-title">{{ item.title }}</text>
        </view>
        <view class="item-info">
          <view class="info-row">
            <uni-icons color="#666" size="14" type="time"></uni-icons>
            <text>提交时间：{{ item.submitTime }}</text>
          </view>
          <view class="info-row">
            <uni-icons color="#666" size="14" type="person"></uni-icons>
            <text>提交人：{{ item.submitter }}</text>
          </view>
          <view class="info-row">
            <uni-icons color="#666" size="14" type="officebuilding"></uni-icons>
            <text>提交部门：{{ item.department }}</text>
          </view>
        </view>
        <view class="item-button" @click="viewDetail(item)">
          <text class="button-text">查看详情</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {ref} from 'vue';

// 定义标签页数组
const tabs = ['全部', '铅封入库', '维修换铅', '车辆入库'];
// 当前选中的标签页索引
const currentTab = ref(0);

// 待办事项列表
const todoList = ref([
  {
    title: '2023年第四季度设备维修申请',
    submitTime: '2023-12-15 14:30',
    submitter: '陈建国',
    department: '设备维护部',
    status: '待审批',
    selected: false
  },
  {
    title: '运输车辆季度检修计划',
    submitTime: '2023-12-14 09:15',
    submitter: '张明远',
    department: '运输部',
    status: '审批中',
    selected: false
  },
  {
    title: '新购铅封材料入库申请',
    submitTime: '2023-12-13 16:45',
    submitter: '李志强',
    department: '仓储部',
    status: '已通过',
    selected: false
  },
  {
    title: '特种车辆维修申请表',
    submitTime: '2023-12-12 11:20',
    submitter: '王海涛',
    department: '车队管理部',
    status: '已驳回',
    selected: false
  }
]);

// 查看待办事项详情的方法
const viewDetail = (item: any) => {
  console.log('查看详情:', item);
};
</script>

<style scoped>
/* 设置页面高度为 100% */
page {
  height: 100%;
}

/* 容器样式 */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f9fafb;
  position: relative;
}

/* 批量操作按钮样式 */
.batch-button button {
  background-color: #3b82f6;
  color: #fff;
  padding: 8px 24px;
  font-size: 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.batch-button button uni-icons {
  margin-right: 4px;
}

/* 顶部导航样式 */
.nav-header {
  position: fixed;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  z-index: 50;
  display: flex;
  flex-direction: column;
}

/* 导航标签样式 */
.nav-tabs view {
  padding: 12px 24px;
  white-space: nowrap;
}

/* 内容区域样式 */
.content {
  padding-top: 55px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: #f9fafb;
}

/* 待办事项样式 */
.todo-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* 待办事项头部样式 */
.item-header {
  margin-bottom: 12px;
}

/* 待办事项标题样式 */
.item-title {
  font-size: 16px;
  font-weight: 500;
}

/* 待办事项信息样式 */
.item-info {
  font-size: 14px;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

/* 信息行样式 */
.info-row {
  display: flex;
  align-items: center;
}

.info-row uni-icons {
  margin-right: 4px;
}

/* 待办事项按钮样式 */
.item-button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
}

.button-text {
  background-color: #3b82f6;
  color: #fff;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 4px;
  white-space: nowrap;
}

.item-button button {
  background-color: #3b82f6;
  color: #fff;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 4px;
  white-space: nowrap;
  width: auto;
  margin-left: auto;
  flex-shrink: 0;
}

/* 标签滚动区域样式 */
.tab-scroll {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 标签容器样式 */
.tab-container {
  padding: 0 8px;
  border-bottom: 1px solid #ebedf0;
  display: flex;
}

/* 标签项样式 */
.tab-item {
  padding: 12px 20px;
  font-size: 14px;
  color: #666666;
  position: relative;
  transition: all 0.3s;
}

/* 激活状态的标签项样式 */
.tab-item.active {
  color: #2b5aed;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background-color: #2b5aed;
}

/* 隐藏滚动条 */
.tab-scroll::-webkit-scrollbar {
  display: none;
}
</style>
